<template>
     <el-row class="container">
         <ParentComment  v-if="commentData.parent" :commentData="commentData.parent"
          @parentCallReply="diguiCallReply"
         />
         <div>
            <el-row class="userinfo" type="flex" justify="space-between">
                <el-row class="user-pic">
                    <img :src="$axios.defaults.baseURL + commentData.account.defaultAvatar" alt="">
                    <span>{{commentData.account.nickname}}</span>
                    <span>{{commentData.created_at}}</span>
                </el-row>
                <el-row class="reply-num">{{commentData.level}}</el-row>
            </el-row>
            <el-row class="content">
                <el-row class="words">{{commentData.content}}</el-row>
                <el-row class="pic">
                    <el-row class="pic-item" v-for="item in commentData.pics" :key="item.id">
                        <img :src="$axios.defaults.baseURL + item.url" alt=""/>
                    </el-row>
                </el-row>
                <el-row class="replyWapper">
                    <span class="reply" @click="parentCallReply">回复</span>
                </el-row>
            </el-row> 
         </div>
     </el-row>
</template>

<script>
export default {
    //声明当前组件的 name 来作为标签来使用
    name:'ParentComment',
    props:['commentData','index'],
    data(){
        return{
            // showReplys:false
        }
    },
    methods:{
        // showReply(){
        //     this.showReplys = true;
        // },
        // hideReply(){
        //     this.showReplys = false;
        // },
        parentCallReply(){
            // 每一层都有触发自定义事件parentCallReply
            // 并将父级本层id和昵称传出留作他用
            this.$emit('parentCallReply',{
                followId:this.commentData.id,
                nickname:this.commentData.account.nickname
            })
        },
        // 因为是递归父级，所以在当前父级的上一级就要使用parentCallReply事件
        diguiCallReply(parentInfo){
            this.$emit('parentCallReply',parentInfo)
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    margin:2px 2px 0;
    border:1px solid #DDDDDD;
    background-color: #F9F9F9;
    .userinfo{
        padding:22px 20px 0;
        .user-pic{
            img{
                width:15px;
                height:15px;
                border-radius: 50%;
                vertical-align: middle;
            }
            span{
                font-size: 12px;
                color: #666666;
                &:last-child{
                    color: #999999;
                }
            }
        }
        .reply-num{
            font-size: 12px;
            color: #999999;
        }
    }
    .content{
        padding:12px 20px 24px 50px;
        .words{
            font-size: 16px;
            color: #333;
        }
        .pic{
            display:flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-top: 10px;
            .pic-item{
                width: 82px;
                height: 90px;
                text-align: center;
                line-height: 90px;
                margin-right: 5px;
                margin-bottom: 5px;
                border:1px dashed #DDDDDD;
                border-radius: 5px;
                img{
                    width: 72px;
                    height: 82px;
                    object-fit: contain;//覆盖
                }
            }
        }
        .replyWapper{
            height:14px;
            text-align: right;
            .reply{
                font-size: 12px; 
                color: #2640E1;
                cursor: pointer;
                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
}

</style>